import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:ts_app_dart/consts/index.dart';
import 'package:ts_app_dart/utils/index.dart';
import 'package:ts_app_dart/widget/my_scroll_widget.dart';

class OrderInfoPage extends StatefulWidget {
  const OrderInfoPage({Key key}) : super(key: key);

  @override
  _OrderInfoPageState createState() => _OrderInfoPageState();
}

class _OrderInfoPageState extends State<OrderInfoPage> {
  Widget _createOptTools() {
    return Container(
      height: 60.0,
      padding: const EdgeInsets.symmetric(horizontal: 16.0),
      child: Theme(
        data: Theme.of(context).copyWith(
          buttonTheme: const ButtonThemeData(
            height: 44.0,
          ),
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Expanded(
              child: TextButton(
                child: Text(
                  '拒单',
                  style: TextStyle(
                    fontSize: 18.0,
                  ),
                ),
                onPressed: () {},
                style: ButtonStyle(
                  foregroundColor: MaterialStateProperty.resolveWith((states) {
                    return Color(0xFF4688FA);
                  }),
                  backgroundColor: MaterialStateProperty.resolveWith((states) {
                    return Color(0xFFE1EAFA);
                  }),
                  side: MaterialStateProperty.all<BorderSide>(BorderSide.none),
                  shape: MaterialStateProperty.all<OutlinedBorder>(
                    RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(2.0),
                    ),
                  ),
                ),
              ),
            ),
            SizedBox(width: 16.0),
            Expanded(
              child: TextButton(
                child: Text(
                  '接单',
                  style: TextStyle(
                    fontSize: 18.0,
                  ),
                ),
                onPressed: () {},
                style: ButtonStyle(
                  foregroundColor: MaterialStateProperty.resolveWith((states) {
                    return Color(0xFFFFFFFF);
                  }),
                  backgroundColor: MaterialStateProperty.resolveWith((states) {
                    return Color(0xFF4688FA);
                  }),
                  side: MaterialStateProperty.all<BorderSide>(BorderSide.none),
                  shape: MaterialStateProperty.all<OutlinedBorder>(
                    RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(2.0),
                    ),
                  ),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }

  Widget _buildOrderGoodsItem(int index) {
    final Widget item = Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Padding(
          padding: EdgeInsets.only(top: 5.0),
          child: Image.asset('images/wares/icon_goods.png',
              width: 56.0, height: 56.0),
        ),
        SizedBox(width: 8.0),
        Expanded(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Text(
                index.isEven ? '泊泉雅花瓣·浪漫亲肤玫瑰沐浴乳' : '日本纳鲁火多橙饮',
                maxLines: 1,
                overflow: TextOverflow.ellipsis,
              ),
              SizedBox(height: 4.0),
              Text(index.isEven ? '玫瑰香 520ml' : '125ml',
                  style: Theme.of(context).textTheme.titleSmall),
              SizedBox(height: 8.0),
              Row(
                children: <Widget>[
                  _buildGoodsTag(
                      Theme.of(context).colorScheme.error, '立减2.50元'),
                  SizedBox(height: 4.0),
                  Offstage(
                    offstage: index % 2 != 0,
                    child: _buildGoodsTag(
                        Theme.of(context).primaryColor, '抵扣2.50元'),
                  )
                ],
              )
            ],
          ),
        ),
        SizedBox(width: 8.0),
        const Text('x1', style: TextStyle(fontSize: 12.0)),
        SizedBox(width: 32.0),
        Text('¥25',
            style: TextStyle(fontSize: 14, fontWeight: FontWeight.bold)),
      ],
    );

    return DecoratedBox(
      decoration: BoxDecoration(
        border: Border(
          bottom: Divider.createBorderSide(context, width: 0.8),
        ),
      ),
      child: Padding(
          padding: const EdgeInsets.symmetric(vertical: 16.0), child: item),
    );
  }

  Widget _buildOrderInfoItem(String title, String content) {
    return MergeSemantics(
      child: Container(
        padding: const EdgeInsets.symmetric(vertical: 4.0),
        child: Row(
          children: <Widget>[
            Text(title,
                style: Theme.of(context)
                    .textTheme
                    .titleSmall
                    ?.copyWith(fontSize: 14.0)),
            SizedBox(width: 8.0),
            Text(content)
          ],
        ),
      ),
    );
  }

  Widget _buildGoodsTag(Color color, String text) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 8.0),
      decoration: BoxDecoration(
        color: color,
        borderRadius: BorderRadius.circular(2.0),
      ),
      height: 16.0,
      alignment: Alignment.center,
      child: Text(
        text,
        style: TextStyle(
          color: Colors.white,
          fontSize: 10.0,
          height: 1.2 ?? null,
        ),
      ),
    );
  }

  Widget _buildGoodsInfoItem(String title, String amount,
      {Color contentTextColor}) {
    return MergeSemantics(
      child: Container(
        padding: const EdgeInsets.symmetric(vertical: 8.0),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Text(title),
            Text('¥$amount',
                style: TextStyle(
                    color: contentTextColor ??
                        Theme.of(context).textTheme.bodyMedium?.color,
                    fontWeight: FontWeight.bold))
          ],
        ),
      ),
    );
  }

  void _showCallPhoneDialog(String phone) {
    showDialog<void>(
      context: context,
      barrierDismissible: false,
      builder: (BuildContext context) {
        return AlertDialog(
          title: const Text('提示'),
          content: Text('是否拨打：$phone ?'),
          actions: <Widget>[
            TextButton(
              onPressed: () => Get.back(),
              child: const Text('取消'),
            ),
            TextButton(
              onPressed: () {
                Get.back();
                // Utils.launchTelURL(phone);
                // CommonUtils.launchWebURL(LaunchUrls.testRemoteUrl);
                CommonUtils.launchWebURL(LaunchUrls.meiTuanUrl);
              },
              style: ButtonStyle(
                // 按下高亮颜色
                overlayColor: MaterialStateProperty.all<Color>(
                    Theme.of(context).colorScheme.error.withOpacity(0.2)),
              ),
              child: Text(
                '拨打',
                style: TextStyle(color: Theme.of(context).colorScheme.error),
              ),
            ),
          ],
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    final Color red = Theme.of(context).colorScheme.error;

    final List<Widget> children = [
      SizedBox(height: 20.0),
      const Text(
        '暂未接单',
        style: TextStyle(fontSize: 24.0, fontWeight: FontWeight.bold),
      ),
      SizedBox(height: 32.0),
      const Text(
        '客户信息',
        style: TextStyle(fontSize: 18.0, fontWeight: FontWeight.bold),
      ),
      SizedBox(height: 16.0),
      Row(
        children: <Widget>[
          ClipOval(
            child: Image.asset('images/wares/icon_avatar.png',
                width: 44.0, height: 44.0),
          ),
          SizedBox(width: 8.0),
          Expanded(
            // 合并Text的语义
            child: MergeSemantics(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: const <Widget>[
                  Text('郭李'),
                  SizedBox(height: 8.0),
                  Text('15000000000'),
                ],
              ),
            ),
          ),
          SizedBox(
            width: 0.6,
            height: 24.0,
            child: VerticalDivider(),
          ),
          //Gaps.hGap16,
          Semantics(
            label: '拨打电话',
            child: GestureDetector(
              child: Padding(
                  padding: EdgeInsets.only(left: 20.0),
                  child: Image.asset('images/wares/icon_phone.png',
                      width: 24.0, height: 44.0)),
              onTap: () => _showCallPhoneDialog('15000000000'),
            ),
          )
        ],
      ),
      SizedBox(height: 10.0),
      Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Image.asset('images/wares/icon_address.png',
              width: 16.0, height: 20.0),
          SizedBox(width: 4.0),
          Expanded(child: Text('西安市雁塔区 鱼化寨街道唐兴路唐兴数码3楼318', maxLines: 2)),
        ],
      ),
      SizedBox(height: 32.0),
      const Text(
        '商品信息',
        style: TextStyle(fontSize: 18.0, fontWeight: FontWeight.bold),
      ),
      ListView.builder(
        // 如果滚动视图在滚动方向无界约束，则必须为true
        shrinkWrap: true,
        // 禁用 ListView 滑动，使用外层的 ScrollView 滑动
        physics: NeverScrollableScrollPhysics(),
        itemCount: 2,
        itemBuilder: (_, index) => _buildOrderGoodsItem(index),
      ),
      SizedBox(height: 8.0),
      _buildGoodsInfoItem('共2件商品', '50.00'),
      _buildGoodsInfoItem('配送费', '5.00'),
      _buildGoodsInfoItem('立减', '-2.50', contentTextColor: red),
      _buildGoodsInfoItem('优惠券', '-2.50', contentTextColor: red),
      _buildGoodsInfoItem('金币抵扣', '-2.50', contentTextColor: red),
      _buildGoodsInfoItem('佣金', '-1.0', contentTextColor: red),
      Divider(),
      SizedBox(height: 8.0),
      SizedBox(height: 8.0),
      _buildGoodsInfoItem('合计', '46.50'),
      SizedBox(height: 8.0),
      Divider(),
      SizedBox(height: 32.0),
      const Text(
        '订单信息',
        style: TextStyle(fontSize: 18.0, fontWeight: FontWeight.bold),
      ),
      SizedBox(height: 12.0),
      _buildOrderInfoItem('订单编号:', '1256324856942'),
      _buildOrderInfoItem('下单时间:', '2021/08/26 12:20'),
      _buildOrderInfoItem('支付方式:', '在线支付/支付宝'),
      _buildOrderInfoItem('配送方式:', '送货上门'),
      _buildOrderInfoItem('客户备注:', '无'),
      SizedBox(height: 16.0),
    ];

    final Widget bottomMenu = _createOptTools();

    return Scaffold(
      appBar: AppBar(
        // 可以自定义阴影颜色
        // shadowColor: Colors.red,
        // elevation: 0.0,
        // backgroundColor: Colors.white,
        title: null,
        actions: [
          TextButton(
            child: Text(
              '订单跟踪',
              style: TextStyle(
                fontSize: 14.0,
                color: Colors.white,
              ),
            ),
            onPressed: () {
              Get.toNamed('/orderTrack');
            },
          ),
        ],
      ),
      body: MyScrollWidget(
        children,
        bottomButton: bottomMenu,
      ),
    );
  }
}
